<!-- 参考社区改写的 uni代码 https://ext.dcloud.net.cn/plugin?id=2783 -->
<template>
	<view class="qzx-map">
		<view :viewportProps="viewportProps"  :change:viewportProps="amap.viewportChange" :change="idname.updateEcharts" :id="idname" class="qzxmap"></view>
	</view>
</template>

<script>
	/*
		解决map层级问题, 使用render.js渲染
		这里地图组件中没有当前用户所在位置等的信息,主要用于展示经纬度位置所在地图
	*/
	const start = 'static/start.png' // marker图片
	const end = 'static/end.png' // marker图片
	export default {
		props: {
			lat: {
				type: Number,
				default: 39.908775
			},
			lng: {
				type: Number,
				default: 116.397428
			},
			markers: {
				type: Array,
				default: () => []
			},
			idname: {
				type: String,
				default: 'amap'
			}
		},
		computed: {
			// 聚合视图层的所有数据变化，传给renderjs的渲染层
			viewportProps() {
				return {
					markerList:this.markers
				}
			}
		},
		data() {
			return {
				dataIndex: ''
			}
		},
		methods: {
			//地图点击回调事件
			onViewClick(params) {
				this.dataIndex = params.dataIndex
			}
		}
	}
</script>

<script module="amap" lang="renderjs">
	import config from './config.js'

	export default {
		props: {
			idname: {
				type: String,
				default: 'amap'
			}
		},
		data() {
			return {
				map: null,
				ownerInstanceObj: null, //service层对象
				renderProps: {},
				markerList:[]
			}
		},
		mounted() {
			if (typeof window.AMap === 'function') {
				this.initAmap()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + config.WEBAK
				script.onload = this.initAmap.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initAmap() {
				let center = [this.markerList[0].lng,this.markerList[0].lat]
				this.map = new AMap.Map('amap', {
					resizeEnable: true,
					center: center, // 地图center值
					layers: [ //使用多个图层
						// new AMap.TileLayer.Satellite() //使用卫星图
					],
					zooms: [4, 18], //设置地图级别范围
					zoom: 12
				})

				this.initMarkers()
			},
			//初始化标记点
			initMarkers() {
				let prevMarker = null
				let prevIcon = null
				const {
					markerList
				} = this.renderProps
				this.markerList.forEach((item, index) => {
					if (!!item.icon) {
						//添加点标记
						let marker = new AMap.Marker({
							position: new AMap.LngLat(item.lng, item.lat),
							offset: new AMap.Pixel(-13, -30),
							icon: item.icon
						})

						// marker.on('click', (e) => {
						// 	if(!!prevMarker){
						// 		prevMarker.setIcon(prevIcon)
						// 	}
						// 	prevIcon = item.icon
						// 	prevMarker = marker
						// 	// marker.setIcon(selectedStart)
						// 	this.dataIndex = index
						// 	this.onClick(null,this.ownerInstanceObj)
						// })

						this.map.add(marker)
					}

				})
			},
			viewportChange(props) {
				this.renderProps = props
				this.markerList = props.markerList
			},
			idChange(n) {
				this.idname = n
			},
			updateEcharts(val) {
				// 监听 service 层数据变更
				this.map = ownerInstance
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					dataIndex: this.dataIndex
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qzxmap {
		width: 750rpx;
		height: 464rpx;
	}

	.infoWindow-wrap {
		margin-left: 50px;
		color: #f00;
	}
</style>